<template>
	<view class="content">
		<view class="main">
		<navgatsVue :navigationMsg="navigationMsg"></navgatsVue>
			<view class="gh_top">
				<view class="gh_top_zuo">
					<image src="/static/主页.png" mode="" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="gh_top_you">
					<p style="width: 450rpx;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;line-height: 100rpx; font-size: 37rpx;">首月1元 99新 ipone16pro maxdasujohfbsadnojg</p>
					<p style="width: 450rpx;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;line-height: 50rpx; font-size: 30rpx;color: #959191;">套餐：512GB 原色钛金属 碎租随还</p>
					<p style="width: 450rpx;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;line-height: 50rpx; font-size: 30rpx;color: #959191;">租期：2025.03.21-2026.03.20</p>
					<p style="width: 450rpx;text-overflow: ellipsis; overflow: hidden;white-space: nowrap;line-height: 50rpx; font-size: 30rpx;color: #959191;">数量：1</p>
				</view>
				
			</view>
			<view class="gh_center">
				<view class="gh_center_zuo" @click="showone = true">
					<p style="font-size: 35rpx;line-height: 100rpx;">归还方式</p>
				</view>
				<view class="gh_center_you">
					<p style="font-size: 28rpx;text-align: right;line-height: 100rpx;color: #757373;">快递归还（邮费自付）<span style="color: #959191;"> > </span></p>
				</view>
			</view>
			<view class="gh_centertwo">
				<view class="gh_centertwo_one">
					<p style="font-size: 35rpx;line-height: 100rpx;">归还地址</p>
				</view>
				<view class="gh_centertwo_two">
					<p style="font-size: 27rpx;color: #959191;">官方严选商城 18878886600</p>
				</view>
				<view class="gh_centertwo_three">
					<p style="font-size: 27rpx;color: #959191;">广东省广州市天河区广东省广州市天河区体育西路天河大厦写字楼3楼官方严选商城仓库组</p>
				</view>
			</view>
			<view class="gh_kuais">
				<view class="gh_kuais_list">
					<view class="gh_kuais_list_zuo"  >
						<p style="font-size: 35rpx;line-height: 100rpx;" >快递公司</p>
					</view>
					<view class="gh_kuais_list_you"  @click="showtwo = true" >
						<p style="font-size: 28rpx;text-align: right;line-height: 100rpx;color: #757373;">选择快递公司{{'   '}}<span style="color: #959191;"> > </span></p>
					</view>
				</view>
				<view class="gh_kuais_listtwo">
					<view class="gh_kuais_list_zuo">
						<p style="font-size: 35rpx;line-height: 100rpx;">快递单号</p>
					</view>
					<view class="gh_kuais_list_you">
						<p style="font-size: 28rpx;text-align: right;line-height: 100rpx;color: #757373;">请输入物流、快递单号{{'   '}}<span style="color: #959191;"> > </span></p>
					</view>
				</view>
				
			</view>
			<view class="gh_btm_mz">
				<view class="gh_btm_mz_bt">
					<image src="/static/警告.png" style="width: 40rpx;height: 40rpx;margin-top: 35rpx;" mode=""></image>
					<p style="font-size: 35rpx;line-height: 100rpx;">{{" "}}免责声明</p>
				
				</view>
				<view class="gh_btm_mz_title">
					<p style="font-size: 30rpx;color: #A09E9E;">
						1.订单交易快照中未明确约定[随租随还]的订单或明确约定[随租随还]的
						订单在尚未满足提前归还条件的情况下，用户提前归还商品，商家将有权
						按《租赁服务协议》的规定归还租金并要求用户赔偿违约金，特殊情况可
						联系客服。
						
					</p>
					<p style="font-size: 30rpx;color: #A09E9E;">
						2.收派员上门取件（商家包邮）则运费及保价费用（如商家要求保价）由
						商家承担;若归还方式快递归还（邮费自付）、收派员上门取件（邮费自
						付则运费及保价费用由用户承担；若商品详情页对归还物流公司有特殊
						要求的，用户则应按照要求选择物流公司；实际完成归还日期以物流官网
						揽收时间为准。
					</p>
				</view>
			</view>
			<view class="btms">
				
			</view>
			<view class="positon_buttom">
				<u-button text="确认归还" style="width: 90%;height: 90rpx;border-radius: 60rpx;background-color: #FBD748;"></u-button>
			</view>
			<u-picker :show="showone" :columns="columnsone" @confirm="onyes()" @cancel="onnos()"></u-picker>
			<u-picker :show="showtwo" :columns="columnstwo" @confirm="ondans()" @cancel="notdans()" ></u-picker>
		</view>
	</view>
</template>

<script>
	import navgatsVue from "../../../common/navgats/navgats.vue"
	export default {
		data() {
			return {
				navigationMsg:{
					title:"归还",
					bgColor:"#F6F6F6"
				},
				showone: false,
				showtwo: false,
				                columnsone: [
				                    ['用户到店归还', '快递归还（邮费自付）', '收派员上门取件（邮费自付）']
				                ],
								columnstwo: [
								    ['顺丰', '申通', '圆通']
								]
					
			}
		},
		components:{
			navgatsVue
		},
		methods: {
			onnos(){
			this.showone=false	
			},
				onyes(){
					this.showone=false
				},
				ondans(){
					this.showtwo=false
				},
				notdans(){
					this.showtwo=false
				}
				
		}
	}
</script>

<style lang="scss">
.content {
		width: 100vw;
		height: 100vh;
		/* position: absolute; */
		background-color: #F6F6F6;
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		overflow-y: auto;
	}

	.main {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.gh_top{
		width: 90%;
		height: 300rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
	}
	.gh_top_zuo{
		width: 30%;
		height: 100%;
	}
	.gh_top_you{
		width: 70%;
		height: 100%;
	}
	.gh_center{
		width: 90%;
		height: 100rpx;
		background-color: #ffffff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		// flex-direction: column;
		flex-direction: row;
		align-items: center;
	}
	.gh_center_zuo{
		width: 45%;
		height: 100%;
		margin-left: 5%;
	}
	.gh_center_you{
		width: 45%;
		height: 100%;
	}
	.gh_centertwo{
		width: 90%;
		height: 300rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		overflow: hidden;
		margin-top: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	.gh_centertwo_one{
		width: 90%;
		height: 100rpx;
	}
	.gh_centertwo_two{
		width: 90%;
		height: 75rpx;
	}
	.gh_centertwo_three{
		width: 90%;
		height: 125rpx;
	}
	.gh_kuais{
		width: 90%;
		height: 200rpx;
		background-color: #ffffff;
		margin-top: 30rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.gh_kuais_list{
		width: 90%;
		height: 100rpx;
		display: flex;
		border-bottom: 1px solid #ccc;
	}
	.gh_kuais_listtwo{
		width: 90%;
		height: 100rpx;
		display: flex;
	}
	.gh_kuais_list_zuo{
		width: 50%;
		height: 100%;
	}
	.gh_kuais_list_you{
		width: 50%;
		height: 100%;
	}
	.gh_btm_mz{
		width: 90%;
		height: 400rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.gh_btm_mz_bt{
		width: 90%;
		height: 100rpx;
		display: flex;
	}
	.gh_btm_mz_title{
		width: 90%;
		height: 300rpx;
		overflow-y: scroll;
	}
	.positon_buttom{
		width: 100%;
		height: 100rpx;
		// background-color: #ffffff;
		position: absolute;
		bottom: 0;
	}
	.btms{
		width: 100%;
		height: 200rpx;
		
	}
</style>
